<template>
  <div>
    <section class="table-box" v-loading="loading" :element-loading-text="$t('unit.loading')">
      <div class="header">
        <div class="area">
          {{$t('dashboard.now_rate')}}：<cu :val="shares_15m | num" :decimals="2"></cu> {{ shares_unit }}/s
        </div>
        <div class="area">
          <span :class="{active:status==='ALL'}" @click="changetag('ALL')">{{$t('mill.all_machine')}}</span>
          <span :class="{active:status==='ACTIVE'}" @click="changetag('ACTIVE')">{{$t('dcrSearch.all_mill')}}</span>
          <span :class="{active:status==='DEAD'}" @click="changetag('DEAD')">{{$t('dcrSearch.dead_mill')}}</span>
        </div>
        <div style="width:288px;"></div>
        <div style="width:76px;"></div>
      </div>
      <table>
        <thead>
          <tr>
            <th class="pointer">{{$t('mill.worker_name')}}</th>
            <th class="pointer">{{subCoinType === 'dcr' ? $t('dcrSearch.accept_15m') : $t('ethSearch.hr')}}</th>
            <th class="pointer">{{subCoinType === 'dcr' ? $t('dcrSearch.accept_1h') : $t('ethSearch.hr2')}}</th>
            <th class="pointer">{{$t('dcrSearch.last_share_time')}}</th>
            <th class="pointer">{{$t('mill.status')}}</th>
          </tr>
        </thead>
        <tbody>
          <template v-if="list.length">
            <tr v-for="(item, index) in list" :key="index">
              <td>{{item.worker_name}}</td>
              <td>{{item.accept_15m}}H/s</td>
              <td>{{item.accept_1h}}H/s</td>
              <td>{{item.last_share_time}}</td>
              <td class="status" :class="item.offline?'inactive':'active'">{{item.offline ? $t('ethSearch.not_online') : $t('ethSearch.online')}}</td>
            </tr>
          </template>
          <template v-else>
            <tr>
              <td colspan="8">{{$t('unit.no_data')}}</td>
            </tr>
          </template>
        </tbody>
      </table>
    </section>
  </div>
</template>
<script>
import cu from '@/components/CountUp';
import { InWorkerList, InWorkStats } from '@/api';
import { mapGetters } from 'vuex';
import Vue from 'vue';

export default {
  components: {
    cu,
  },
  data() {
    return {
      loading: false,
      shares_15m: '',
      shares_unit: '',
      status: 'ALL',
      timer: undefined,
      allList: [],
      workerStatsLoading: false,
    };
  },
  computed: {
    ...mapGetters(['subCoinType', 'subAddress', 'subId']),
    list() {
      const activeList = [];
      const deadList = [];
      this.allList.forEach((v) => {
        if (v.offline) {
          deadList.push(v);
        } else {
          activeList.push(v);
        }
      });
      switch (this.status) {
        case 'ALL':
          return this.allList;
        case 'ACTIVE':
          return activeList;
        case 'DEAD':
          return deadList;
        default:
          return this.allList;
      }
    },
  },
  created() {
    this.getInWorkerList();
    this.getInWorkStats();
    this.timer = window.setInterval(() => {
      this.getInWorkerList();
      this.getInWorkStats();
    }, 15000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    changetag(tag) {
      this.status = tag;
    },
    getInWorkStats() {
      if (this.workerStatsLoading) {
        return;
      }
      this.workerStatsLoading = false;
      InWorkStats({
        coin_type: this.subCoinType,
        address: this.subAddress,
      }).then((res) => {
        if (res.data.status === 1) {
          const accept = res.data.data.share_accept;
          const a = Vue.filter('formatHashrate')(accept).split(' ');
          this.shares_15m = a[0];
          this.shares_unit = `${a[1]}H`;
        } else {
          this.shares_15m = 0;
          this.shares_unit = 'H';
        }
        this.workerStatsLoading = false;
      }).catch(() => {
        this.workerStatsLoading = false;
      });
    },
    getInWorkerList() {
      if (this.loading) {
        return;
      }
      this.loading = true;
      InWorkerList({
        address: this.subAddress,
        coin_type: this.subCoinType,
      }).then((res) => {
        if (res.data.status === 1) {
          this.allList = res.data.data.data;
        } else {
          this.allList = [];
        }
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
  },
  watch: {
    subId() {
      this.loading = false;
      this.getInWorkerList();
      this.getInWorkStats();
    },
  },
};
</script>
<style lang="scss" scoped>
.area {
  height: 30px;
  line-height: 28px;
  border-width: 1px;
  border-style: solid;
  font-size: 12px;
  margin-top: 10px;
  border-radius: 3px;
  &:first-of-type {
    border-color: transparent;
    color: #333;
  }
  &:nth-of-type(2) {
    display: flex;
    background-color: #fff;
    border-color: #eaeaea;
    width: 270px;
    span {
      display: inline-block;
      text-align: center;
      flex-grow: 1;
      border-right: 1px solid #eaeaea;
      cursor: pointer;
      &.active {
        background-color: #247ba0;
        color: #fff;
      }
      &:last-of-type {
        border: none;
      }
    }
  }
}
</style>
